<!-- 
  @name: 账号管理
  @date: 2020.3.12
 -->
<template>
	<view class="content">
		<!-- 列表 -->
		<view class="list-card">
			<view
				class="card"
				v-for="(item, index) in lists"
				:key="item.staffId"
				@tap="goDetails(item, index)">
				<image class="img" :src="item.userPhoto ? item.userPhoto : imgUser"></image>
				<view class="msg">
					<view class="top">
						<view class="name">{{item.wxName}}</view>
						<view class="phone">{{item.userPhone}}</view>
					</view>
					<view class="btm">
						<!-- <view :class="item.userIdentity === 0 ? 'i1' : 'i2'"></view> -->
						<view class="'i1'"></view>
						<view class="type" v-text="item.userIdentity === 0 ? '子账号管理员' : '子账号管理员'"></view>
					</view> 
				</view>
				<view class="arrow_nav"></view>
			</view>
		</view>
		<!-- 底部加载提示 -->
		<btm-load></btm-load>
		
		<!-- 添加账号 -->
		<view class="bottom_blank"></view>
		<view class="bottom_view">
			<view class="btn" @tap="$navigateTo('./add')"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: [],  //列表
				page: 1,  //页码
				imgUser: this.$tmp.IMG_USER,  //默认头像
			}
		},
		onLoad() {
			this.getList();
			uni.$on('setAcc_addAccount', this.addAccount);
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.addAccount();
				this.$store.commit('hasLogin');
			}
		},
		onUnload() {
			uni.$off('setAcc_addAccount');
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.addAccount();
		},
		methods: {
			//监听是否添加了账户
			addAccount() {
				this.page = 1;
				this.lists = [];
				this.getList();
			},
			//前往详情页
			goDetails(item, index) {
				this.$store.commit('setTmpData', JSON.stringify(item));
				this.$navigateTo('./details?staffId=' + item.staffId)
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.accountUrl + 'getuseraccountpage',
					data: {
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 列表 */
	.list-card {
		width: 100%;
		padding-left: 38rpx;
		background-color: $color-white;
		.card {
			width: 100%;
			padding-top: 30rpx;
			padding-bottom: 36rpx;
			display: flex;
			flex-direction: row;
			border-bottom: 1rpx solid $color-list;
			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: $border-radius-circle;
			}
			.msg {
				flex: 1;
				margin-top: 6rpx;
				margin-left: 40rpx;
				.top {
					display: flex;
					flex-direction: row;
					align-items: center;
					.name {
						font-size: 32rpx;
					}
					.phone {
						margin-left: 32rpx;
						color: $color-grey-dark;
						font-family: $font-family-num;
					}
				}
				.btm {
					margin-top: 15rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.i1, .i2 {
						width: 20rpx;
					}
					.i1 {
						height: 21rpx;
						background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15qAyiATqo7AAABQ__bsYI480.png');
					}
					.i2 {
						height: 21rpx;
						background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15qAz-ARNvxAAACrrv8e4Y181.png');
					}
					.type {
						font-size: 24rpx;
						margin-left: 20rpx;
					}
				}
			}
			.arrow_nav {
				margin-top: 50rpx;
				margin-right: 60rpx;
			}
		}
	}
	
	/* 添加账号 */
	.bottom_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		.btn {
			width: 182rpx;
			height: 41rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky15qBNuAdVU0AAAeKAoQJpc212.png');
		}
	}
	
</style>
